<template>
  <div style="padding:20px 20px 40px 20px">
    <el-card shadow="hover">
        <el-form inline>
            <!-- <el-form-item label="状态">
                <el-select v-model="queryParams.payStatus " placeholder="请选择">
                    <el-option label="未支付" value="0"></el-option>
                    <el-option label="预付审核成功" value="0"></el-option>
                    <el-option label="预付提交审核" value="0"></el-option>
                    <el-option label="到期取消" value="0"></el-option>
                    <el-option label="预付审核失败" value="0"></el-option>
                    <el-option label="延期提交审核" value="0"></el-option>
                    <el-option label="预付审核失败" value="0"></el-option>
                </el-select>
            </el-form-item> -->
            
            <el-form-item label="型号:">
                <!-- <el-input v-model="queryParams.model" @change="search()" style="width:200px" clearable></el-input> -->
                <el-select v-model="queryParams.model" placeholder="请选择型号" @change="search()" style="width:200px" clearable >
                    <el-option
                    v-for="item in modelOptions"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="尺寸:">
                <!-- <el-input v-model="queryParams.dimensions" @change="search()" style="width:200px" clearable></el-input> -->
                <el-select v-model="queryParams.dimensions" placeholder="请选择尺寸" @change="search()" style="width:200px" clearable >
                    <el-option
                    v-for="item in sizeOptions"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='等级:'> 
                 <!-- <el-input  @change="search()" clearable style="width:200px" v-model="queryParams.assemblyLevel"></el-input> -->
                 <el-select style="width:220px" v-model="queryParams.assemblyLevel" placeholder="请选择" @change="search()" clearable>
                    <el-option label="A级" value="A级"></el-option>
                    <el-option label="A-级" value="A-级"></el-option>
                    <el-option label="P级" value="P级"></el-option>
                    <el-option label="C级" value="C级"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='领取订单号:'> 
                 <el-input  @change="search()" clearable style="width:200px" v-model="queryParams.receiveOrderSn"></el-input>
            </el-form-item>
            <el-form-item label=' 随机数:'> 
                 <el-input  @change="search()" clearable style="width:200px" v-model="queryParams.randomCode"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
                <el-select
                v-model="queryParams.payStatus"
                placeholder="状态"
                clearable
                style="width: 200px"
                filterable 
                @change="search()"
                >
                <el-option
                    v-for="dict in statusOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="功率:">
                <el-select v-model="queryParams.wattage" placeholder="请选择功率" @change="search()" style="width:200px" clearable >
                    <el-option
                    v-for="item in watOptions"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item>
            <el-button size="mini"  v-hasPermi="['rece:money']" @click="getAdvance" type="success" >预付审批列表</el-button>
            </el-form-item> -->
            <el-form-item>
                <el-button size="mini"  v-hasPermi="['rece:time']" @click="getAdvance1" type="success" >延期审批列表</el-button>
            </el-form-item>
            
        </el-form>
    </el-card>
    <el-table 
        v-loading="loading"
        :data="tableData"
        style="margin-top:20px;width: 100%;"
        border
        class="table"
        ref="multipleTable"
        :row-class-name="tableAddClass"
        header-cell-class-name="table-header">
        <el-table-column fixed prop="orderSn" align="center" label="订单编号" width="120px"></el-table-column>
        <el-table-column prop="typeName" align="center" label="价格类型" width="120px"></el-table-column>
        <el-table-column prop="factory" align="center" label="所在工厂" width="180px" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="unitPrice" align="center" label="单价"></el-table-column>
        <el-table-column prop="model" align="center" label="型号" width="120px"></el-table-column>
        <el-table-column prop="wattage" align="center" label="功率（瓦）" width="110px"></el-table-column>
        <el-table-column prop="userName" align="center" label="领用人" width="120px"></el-table-column>
        <el-table-column prop="createTime" align="center" label="领取时间" width="150px"></el-table-column>
        <el-table-column prop="receiveOrderSn" align="center" label="领取订单号"  width="220px" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="requisitionNumber" align="center" label="领取数量" width="110px"></el-table-column>
        <el-table-column align="center" label="领取功率（瓦）" width="120px">
            <template slot-scope="scope">
                {{scope.row.wattage * scope.row.requisitionNumber}}
            </template>
        </el-table-column>
        <el-table-column prop="expireDate" align="center" label="到期时间" width="120px"></el-table-column>
        <el-table-column prop="payStatus" :formatter="(row,cloumn) => row.payStatus ==  0?'未支付': row.payStatus == 1?'已预付':row.payStatus == 2?'全款':row.payStatus == 3?'已发货':row.payStatus == 4?'——':row.payStatus == 5?'未付款延期':row.payStatus == 6?'未付款延期审核通过':row.payStatus == 7?'未付款延期审核失败':row.payStatus == 8?'到期取消':'手动取消'" align="center" label="付款状态"></el-table-column>
        <el-table-column prop="randomCode" align="center" label="随机码"></el-table-column>

        <el-table-column prop="totalPrice" align="center" label="总价"></el-table-column>
        <el-table-column prop="dimensions" align="center" label="尺寸" width="180px"></el-table-column>
        <!-- <el-table-column prop="voucherUrl" width="100" align="center" label="凭证">
            <template slot-scope="scope">
                <el-image  style="width:50px;height:50px" v-if="scope.row.voucherUrl" :src="scope.row.voucherUrl" alt=""></el-image>
                <div v-else>-</div>
            </template>
        </el-table-column> -->
        <el-table-column show-overflow-tooltip prop="content" align="center" label="备注" width="220px"></el-table-column>
        <el-table-column align="center" width="220px" label="操作" fixed="right" >
            <template slot-scope="scope">
                <!-- <el-button v-if="scope.row.voucherUrl" @click="yl(scope.row)" type="text">预览凭证</el-button> -->
                <!-- <el-button @click="upMoney(scope.row)" type="text">上传支付凭证</el-button> -->
                <el-button  @click="update(scope.row)" v-if="scope.row.payStatus != 2 && scope.row.payStatus != 8 && scope.row.payStatus != 9" type="text">修改</el-button>
                <el-button v-if="scope.row.payStatus != 3 && scope.row.payStatus != 8 && scope.row.payStatus != 9" @click="handleFh(scope.row)" type="text">发货</el-button>
                <el-button v-if="scope.row.payStatus != 4 && scope.row.payStatus != 8 && scope.row.payStatus != 9" @click="can(scope.row)" type="text">取消</el-button>
                <el-button  @click="delay(scope.row)" v-if="scope.row.payStatus != 8 && scope.row.payStatus != 9" type="text">延期</el-button>
            </template>
        </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList00"
        >
        </pagination>
        <!-- 订单状态 -->
        <el-dialog
            title="修改"
            :visible.sync="orderDialogVisible"
            width="30%">
            <!-- <span>这是一段信息</span> -->
             <el-select v-model="orderForm.payStatus" placeholder="请选择">
                <el-option
                v-for="item in orderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="orderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOrderStatus">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <el-dialog title="上传支付凭证" :visible.sync="upVis" width="850px">
            <el-form :model="form" label-width="140px">
                <el-form-item label="支付凭证:" prop="type">
                   <el-upload
                    class="avatar-uploader"
                    :action="upImage + '/common/upload'"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    >
                    <img v-if="form.voucherUrl" :src="form.voucherUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  size="mini" @click="upVis = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog> -->
        <el-dialog title="延期申请" :visible.sync="delyVis" width="850px">
            <el-form>
                <el-form-item label="延期理由:">
                    <el-input type="textarea" show-word-limit v-model="delyForm.content"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  size="mini" @click="delyVis = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="submitForm1">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="预付审批列表" :visible.sync="advVis" width="850px">
          <el-table :data="tableData1" style="margin-top:20px;width: 100%;"
            border
            class="table"
            header-cell-class-name="table-header">
            <el-table-column  prop="orderSn" align="center" label="订单编号"></el-table-column>
            <el-table-column  prop="createTime" align="center" label="申请时间"></el-table-column>
            <el-table-column :formatter="(row,cloumn) =>row.type == 0?'审批失败':row.type == 1?'审批通过':row.type == 2?'待审批':''" align="center" label="状态"></el-table-column>
            <el-table-column label="操作"  align="center" >
                <template slot-scope="scope">
                    <el-button  v-if="scope.row.type == 2" @click="ed1(scope.row,1)" type="text">同意预付</el-button>
                    <el-button  v-if="scope.row.type == 2" @click="ed1(scope.row,0)" type="text">拒绝预付</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="延期审批列表" :visible.sync="advVis2" width="850px">
            <el-table :data="tableData2" style="margin-top:20px;width: 100%;"
            border
            class="table"
            header-cell-class-name="table-header">
            <el-table-column  prop="orderSn" align="center" label="订单编号"></el-table-column>
            <el-table-column  prop="createTime" align="center" label="申请时间"></el-table-column>
            <el-table-column :formatter="(row,cloumn) =>row.type == 0?'审批失败':row.type == 1?'审批通过':row.type == 2?'待审批':''" align="center" label="状态"></el-table-column>
            <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button v-if="scope.row.type == 2" @click="ed2(scope.row,1)" type="text">同意延期</el-button>
                    <el-button  v-if="scope.row.type == 2" @click="ed2(scope.row,0)" type="text">拒绝延期</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="预览" :visible.sync="ylVis" width="850px">
            <el-image :src="srcList"></el-image>
        </el-dialog>
  </div>
</template>

<script>
import { getList , edSure ,delySure ,statusSure , data,advanceList , advanceList1 , statusSure1 ,cel,fh,orderStatus} from "@/api/systemSettings/receive.js"; // 权限判断函数
import { getToken } from "@/utils/auth";

export default {
    data () {
    this.can = this.throttle(this.can, 1000)
        return {
            orderDialogVisible:false,
            loading:false,
            upVis:false,
            delyVis:false,
            advVis:false,
            advVis1:false,
            advVis2:false,
            upImage: process.env.VUE_APP_BASE_API,
            tableData:[],
            ylVis:false,
            tableData2:[],
            srcList:[],
            title:'',
            open:false,
            headers: { Authorization: "Bearer " + getToken() },
            queryParams:{
                pageNum: 1,
                pageSize: 10,
            },
            tableData1:[],
            total:0,
            //图片上传
            imageUrl:'',
            delyForm:{},
            form:{},
            orderOptions: [
                {
            value: 0,
            label: '未支付'
            },{
            value: 1,
            label: '已预付'
            }, {
            value: 2,
            label: '付全款'
            }, {
            value: 3,
            label: '已发货'
            }],
            orderForm:{
                id:undefined,
                payStatus:undefined,
            },
            statusOptions:[
                {
            value: 0,
            label: '未付款'
            }, {
            value: 1,
            label: '已预付'
            },{
            value: 2,
            label: '已全款'
            }, {
            value: 3,
            label: '已发货'
            }],
            sizeOptions:[],
            modelOptions:[],
            watOptions:[],
            // time:now Date()
        }
    },
    created() {
        this.getDicts("sys_size").then(response => {
        this.sizeOptions = response.data;
        });
        this.getDicts("sys_model").then(response => {
        this.modelOptions = response.data;
        });
        this.getDicts("sys_wat").then(response => {
        this.watOptions = response.data;
        });
        this.getList00()
        // this.getData()
    },
    methods: {
        throttle (func, wait) {
            let timeout = null
            return function () {
                const context = this
                const args = arguments
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null
                        func.apply(context, args)
                    }, wait)
                }
            }
        },
        tableAddClass(row){
            // console.log(row);
            if(row.row.dayNum >= '0'){
                return 'tr-red'
            }else{
                return ''
            }
        },
        // 发货按钮
        handleFh(row){
            // console.log(row);
        this.$confirm('是否确定发货?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                 fh(row.id).then(res => {
                if(res.code == 200){
                    // console.log(res);
                    this.getList00()
                }
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
           
            
        },
        // 修改按钮
        update(row){
            this.orderForm.id = row.id 
            this.orderForm.payStatus = row.payStatus
            this.orderDialogVisible = true
        },
        updateOrderStatus(){
            // console.log(this.orderForm);
            orderStatus(this.orderForm).then(res => {
                if(res.code == 200){
                    this.orderDialogVisible  = false
                    this.$message.success('修改成功')
                    this.getList00()
                }
            })
        },
        // 搜索功能
        search() {
            this.queryParams.pageNum = 1
            this.getList00()
        },
        // upMoney(row) {
        //     this.form = JSON.parse(JSON.stringify(row))
        //     this.upVis = true;
        // },
        getAdvance1() {
            this.advVis1 = true;
        },
        uploadSuccess(res,file, fileList){
            if(res.code == 200){
                this.form.voucherUrl = res.url
                this.$message.success('图片上传成功');
            }
        },
        // ed(row,type) {
        //     this.$confirm('是否确定审批?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //     }).then(() => {
        //         statusSure({requisitionId:row.id,type:type}).then(res => {
        //             if(res.code == 200){
        //                 this.$message.success('审批成功')
        //                 this.getList00()
        //             }
        //         })
        //     }).catch(() => {
        //     this.$message({
        //         type: 'info',
        //         message: '已取消'
        //     });          
        //     });
        // },
        yl(row) {
            this.srcList = row.voucherUrl
            this.ylVis = true
        },
        can(row) {
            this.$confirm('此操作将取消?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                cel(row.id).then(res => {
                    if(res.code == 200){
                        this.$message.success('取消成功')
                        this.getList00()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        ed1(row,type) {
            this.$confirm('是否确定审批?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                statusSure1({requisitionId:row.requisitionId,id:row.id,type:type}).then(res => {
                    if(res.code == 200){
                        this.advVis = false;
                        this.$message.success('审批成功');
                        this.getList00();
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        ed2(row,type) {
            this.$confirm('是否确定审批?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                statusSure({requisitionId:row.requisitionId,id:row.id,type:type}).then(res => {
                    if(res.code == 200){
                        this.advVis2 = false;
                        this.$message.success('审批成功');
                        this.getList00();
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        getAdvance() {
            advanceList({pageNum:1,pageSize:10000}).then(res => {
                if(res.code == 200){
                    this.tableData1 = res.rows;
                    this.advVis = true;
                }
            })
        },
        getAdvance1() {
            advanceList1({pageNum:1,pageSize:10000}).then(res => {
                if(res.code == 200){
                    this.tableData2 = res.rows;
                    this.advVis2 = true;
                }
            })
        },
        delay(row) {
            this.delyForm = {
                requisitionId:row.id,
                content:''
            }
            this.delyVis = true
        },
        // submitForm() {
        //     if(this.form.voucherUrl == ''){
        //         this.$message.error('不能为空!')
        //     }else {
        //         edSure(this.form).then(res => {
        //             if(res.code == 200){
        //                 this.upVis = false;
        //                 this.$message.success('保存成功')
        //                 this.getList00()
        //             }
        //         })
        //     }
        // },
        submitForm1() {
            if(this.delyForm.content == ''){
                this.$message.error('不能为空!')
            }else {
                delySure(this.delyForm).then(res => {
                    if(res.code == 200){
                        this.delyVis = false;
                        this.$message.success('保存成功')
                        this.getList00()
                    }
                })
            }
        },
        getList00(){
            getList(this.queryParams).then(res => {
                if(res.code == 200){
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        }
    }
}
</script>

<style scoped>
/deep/ .el-table .tr-red {
    color: red !important;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>